<template>
    <div v-if="false">sdfdsfsd</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import * as THREE from 'three'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';

const width = window.innerWidth;
const height = window.innerHeight;

const param = {
    geometry:{
        w:10000,
        h:10000
    },
    focal: {
        v: 60,
        aspect:width / height,
        np:100,
        fp:5000
    },
    camera: {
        x: 0,
        y: 10,
        z: 500
    },
    house: {
        x:0,
        y:0,
        z: 100
    }
}

// 空间
let scene = new THREE.Scene()
scene.background = new THREE.Color('rgb(208,224,253)')
scene.fog = new THREE.Fog(0xffffff, 1, 6000);
const geometry = new THREE.PlaneGeometry(param.geometry.w,param.geometry.h)
const texture = new THREE.TextureLoader().load('http://public.minio.zcloudtechs.cn:9000/web-static/canteen-app/home/grass.jpg')
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set(100, 100);
const material = new THREE.MeshBasicMaterial({map: texture});
const mesh = new THREE.Mesh(geometry, material)
mesh.rotation.x = -0.46 * Math.PI;
scene.add(mesh)
const light = new THREE.AmbientLight(0xCCCCCC);
scene.add(light);

// 建房子
const house = new THREE.Group();

// 地基&基础
const foundation = new THREE.PlaneGeometry( 200, 300);
const foundationTexture = new THREE.TextureLoader().load('http://public.minio.zcloudtechs.cn:9000/web-static/canteen-app/home/foundation.jpg');
foundationTexture.wrapS = THREE.RepeatWrapping;
foundationTexture.wrapT = THREE.RepeatWrapping;
foundationTexture.repeat.set( 2, 2 );
const foundationMtl = new THREE.MeshBasicMaterial({map: foundationTexture});
    
const floorMesh = new THREE.Mesh( foundation, foundationMtl );
floorMesh.rotation.x = -.46*Math.PI
floorMesh.rotation.z = .5*Math.PI
floorMesh.position.z = param.house.z
floorMesh.position.y = param.house.y
floorMesh.position.x = param.house.x
house.add(floorMesh)

// 墙壁
const shape = new THREE.Shape()
shape.moveTo(-100, 0);
shape.lineTo(100, 0);
shape.lineTo(100,112);
shape.lineTo(0,150);
shape.lineTo(-100,112);
shape.lineTo(-100,0);

const extrudeGeometry = new THREE.ExtrudeGeometry(shape)
const wallTexture = new THREE.TextureLoader().load('http://public.minio.zcloudtechs.cn:9000/web-static/canteen-app/home/wall.jpg')
wallTexture.wrapS = texture.wrapT = THREE.RepeatWrapping;
wallTexture.repeat.set( 0.01, 0.005 );
const wallMtl = new THREE.MeshBasicMaterial({map: wallTexture})
const wallMeshL = new THREE.Mesh(extrudeGeometry, wallMtl)
const wallMeshR = new THREE.Mesh(extrudeGeometry, wallMtl)
wallMeshL.position.z = 90;
wallMeshL.position.x = -150;
wallMeshL.rotation.y = Math.PI * 0.5;
wallMeshL.rotation.x = Math.PI * 0.045;
house.add(wallMeshL)

wallMeshR.position.z = 90;
wallMeshR.position.x = 150;
wallMeshR.rotation.y = Math.PI * 0.5;
wallMeshR.rotation.x = Math.PI * 0.035;
house.add(wallMeshR)


const rectangle = new THREE.Shape()
rectangle.moveTo(-150,0)
rectangle.lineTo(150, 0);
rectangle.lineTo(150, 112);
rectangle.lineTo(-150, 112);
rectangle.lineTo(-150, 0);
const rectangleGeometry = new THREE.ExtrudeGeometry(rectangle)
const rectangleTexture = new THREE.TextureLoader().load('http://public.minio.zcloudtechs.cn:9000/web-static/canteen-app/home/wall.jpg')
rectangleTexture.wrapS = texture.wrapT = THREE.RepeatWrapping;
rectangleTexture.repeat.set( 0.01, 0.005 );

const rectangleMtl = new THREE.MeshBasicMaterial({map: rectangleTexture})
const rectangleMeshB = new THREE.Mesh(rectangleGeometry, rectangleMtl)
rectangleMeshB.position.y = 10

const rectangleF = new THREE.Shape()
rectangleF.moveTo(-150,0)
rectangleF.lineTo(150, 0);
rectangleF.lineTo(150, 112);
rectangleF.lineTo(-150, 112);
rectangleF.lineTo(-150, 0);

const houseWindow = new THREE.Path()
houseWindow.moveTo(-20,20);
houseWindow.lineTo(120, 20);
houseWindow.lineTo(120, 90);
houseWindow.lineTo(-20, 90);
houseWindow.lineTo(-20, 20);

const houseDoor = new THREE.Path()
houseDoor.moveTo(-70,0);
houseDoor.lineTo(-110, 0);
houseDoor.lineTo(-110, 90);
houseDoor.lineTo(-70, 90);
houseDoor.lineTo(-70, 0);

rectangleF.holes.push(houseWindow)
rectangleF.holes.push(houseDoor)
const rectangleGeometryF = new THREE.ExtrudeGeometry(rectangleF)
const rectangleMeshF = new THREE.Mesh(rectangleGeometryF, rectangleMtl)
rectangleMeshF.position.z = 200
rectangleMeshF.position.y = -14

house.add(rectangleMeshF)
house.add(rectangleMeshB)

// 屋顶
const roofGeometry = new THREE.BoxGeometry(120, 320, 10)
const roofTexture = new THREE.TextureLoader().load('http://public.minio.zcloudtechs.cn:9000/web-static/canteen-app/home/tile.jpg')
roofTexture.repeat.set(5,1);
roofTexture.wrapS = roofTexture.wrapT = THREE.RepeatWrapping;
roofTexture.rotation = .5*Math.PI;
const roofMtl = new THREE.MeshBasicMaterial({map: roofTexture})
const colorMaterial = new THREE.MeshBasicMaterial({ color: '#f7f7f7' });
const mtlArr = [
    colorMaterial,
    colorMaterial,
    colorMaterial,
    colorMaterial,
    colorMaterial,
    roofMtl
]
const roofMeshF = new THREE.Mesh(roofGeometry, mtlArr)
roofMeshF.rotation.x = Math.PI * .7;
roofMeshF.position.y = 170;
roofMeshF.position.z = 150;
roofMeshF.rotation.z = Math.PI / 2;

const roofMeshB = new THREE.Mesh(roofGeometry, mtlArr)

roofMeshB.rotation.x = Math.PI *-1.7;
roofMeshB.position.y = 170;
roofMeshB.position.z = 58;
roofMeshB.rotation.z = Math.PI / 2;

house.add(roofMeshB)
house.add(roofMeshF)
scene.add(house)

// 摄像机
const camera = new THREE.PerspectiveCamera(param.focal.v, param.focal.aspect, param.focal.np, param.focal.fp);
camera.position.set(param.camera.x,param.camera.y, param.camera.z)
camera.lookAt(scene.position);




// 渲染
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.setClearColor(0xcce0ff, 1);
document.body.appendChild(renderer.domElement)
renderer.setAnimationLoop(animation)

// 摄像机角度
new OrbitControls(camera, renderer.domElement);

function animation() {
    console.log(789)
    // controls.update()
    // requestAnimationFrame(animation)
    renderer.render(scene, camera)
}
</script>
